<template>
    <app-dialog v-model="show" width="576px" title="编辑Cookie" @open="handleOpen">

        <div class="cookie_dialog">
            <div class="cookie_header">
                <img src="@/assets/home/waring.png" style="margin-right: 8px;width: 16px;height: 16px;" alt="">
                <div>关闭环境后再编辑Cookie，数据同步会更完整</div>
            </div>
            <div class="cookie_body">
                <div class="list">
                    <div class="item">
                        <div class="label">Cookie:</div>
                        <div class="value">
                            <el-input v-model="state.dialogData.environment_data.user.cookies[0].cookie" :rows="5"
                                type="textarea" style="width: 100%;" placeholder="支持JSON、Netscape格式的Cookie" />
                        </div>
                    </div>

                    <div class="item" v-if="state.dialogData.environment_data.user.cookies.length > 1">
                        <div class="label">其他Cookie:</div>
                        <div class="value">
                            <el-input v-model="state.dialogData.environment_data.user.cookies[1].cookie" :rows="3"
                                type="textarea" style="width: 100%;" placeholder="两份Cookie的格式请保持一致" />
                        </div>
                    </div>

                    <div class="item">
                        <div class="label"></div>
                        <div class="value">
                            <app-button2 @click="clickaddCookie()" v-if="state.dialogData.environment_data.user.cookies.length <= 1">添加其他Cookie</app-button2>
                            <app-button2 @click="clickdeleteCookie()" v-if="state.dialogData.environment_data.user.cookies.length > 1">关闭</app-button2>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">确定</app-button>
        </template>
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const { store, state } = inject('storejs')
const handleOpen = () => {
}

const clickaddCookie = () => {
    state.dialogData.environment_data.user.cookies.push({
        cookie: ''
    })
}

const clickdeleteCookie = () => {
    let a = JSON.parse(JSON.stringify(state.dialogData.environment_data.user.cookies[0]))
    state.dialogData.environment_data.user.cookies = [a]
}

const handleClose = () => {
    show.value = false
    state.dialogData = {}
}

const clickSubmit = () => {
    let body = JSON.parse(JSON.stringify(state.dialogData.environment_data))
    body.id = state.dialogData.id
    body.number = state.dialogData.number
    body.name = state.dialogData.name
    body.remark = state.dialogData.remark ? state.dialogData.remark : ''
    http.put('/environment/update_environment', body).then((res) => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        handleClose()
        store.getEnvironmentList()
    })
}
</script>

<style lang="scss" scoped>
.cookie_dialog {
    padding: 24px;

    .cookie_header {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
        padding: 0 16px;
        color: #000000d9;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .cookie_body {
        display: flex;
        flex-direction: column;

        .list {
            display: flex;
            flex-direction: column;

            .item {
                display: flex;
                align-items: flex-start;
                min-height: 32px;
                margin-bottom: 24px;

                .label {
                    width: 100px;
                    height: 32px;
                    display: flex;
                    justify-content: flex-end;
                    padding-right: 8px;
                    color: #666;
                    font-size: 14px;
                }

                .value {
                    flex: 1;
                    color: #333;
                    font-size: 14px;
                }
            }
        }
    }


}
</style>